<template>
  <div>
    <!-- 插值表达式 -->
    <!-- 小胡子语法: Mustache -->
    <!-- 中间写表达式即可 -->
    <!-- 表达式: 返回一个结果的式子 -->
    <!-- 
      是 1 msg
      是 2 true
      是 3 1 + 1
      是 4 fn()
      是 5 obj.name
      不是 6 if (a === 0) {}
      是 7 a > b ? c : d
      不是 8 for (let i = 0; i < arr.length; i++) {}
     -->
     <!-- 插值表达式只能写在标签内, 不能用于标签属性 -->
    <!-- <p class="{{ msg }}">{{ msg }}</p> -->
    <p>{{ msg }}</p>
    <p>{{ true }}</p>
    <p>{{ 1 + 1 }}</p>
    <!-- 这里渲染用户的名字, 如果大于 18 岁就显示 可以进入某些场所, 如果小于 18 岁, 就显示 回家好好学习 -->
    <!-- 可以用三元运算符来实现 -->
    <p>{{ obj.name }}今年{{ obj.age }}岁, {{ obj.age >= 18 ? '可以进网吧': '回家写作业' }}</p>
  </div>
</template>

<script>
// 默认导出一个对象
export default {
  // 对象中使用 data 函数来提供数据
  data() {
    // data 函数中要返回一个对象
    return {
      // 对象的属性就是我们这个组件的数据
      msg: '你好啊世界!',
      obj: {
        name: '田华进',
        age: 18
      }
    }
  }
}
</script>